import { Modal,  Table, Tag, message } from "antd"
import {
  CheckCircleOutlined,
  SyncOutlined,
  CloseCircleOutlined
} from '@ant-design/icons'
import { useEffect, useState } from "react"
import { getProcess } from "@/apis/process"

const CompareModal = ({ isModalOpen, handleCancel }) => {
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      ellipsis: true,
      fixed: 'left',
      width: 100,
      defaultSortOrder: 'descend',  // 默认降序
      sorter: (a, b) => a.id - b.id,
      style: {
        maxWidth: 100
      }
    },
    {
      title: '运行算法名',
      dataIndex: 'algor_name',
      key: 'algor_name',
      align: 'center',
      ellipsis: true,
      filters: [
        {
          text: 'MOSL',
          value: 'MOSL',
        },
        {
          text: 'MOMA',
          value: 'MOMA',
        }
      ],
      onFilter: (value, record) => (
        // console.log(value, record)
        record.algor_name[0] === value
      ),
    },
    {
      title: '运行数据集名',
      dataIndex: 'file_name',
      key: 'file_name',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '当前状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      ellipsis: true,
      render: (record) => (
        record === 0 ?
          <Tag className="status" color="processing" icon={<SyncOutlined spin />}>运行中</Tag> :
          record === 1 ?
            <Tag className="status" color="success" icon={<CheckCircleOutlined />}>运行成功</Tag> :
            <Tag className="status" icon={<CloseCircleOutlined />} color="error">运行失败</Tag>
      )
    },
    {
      title: '客户数量',
      dataIndex: 'c_num',
      key: 'c_num',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '容量类型',
      dataIndex: 'c_type',
      key: 'c_type',
      align: 'center',
      ellipsis: true,
      width: 100,
      style: {
        maxWidth: 100
      },
      render: (text) => (text)
    },
    {
      title: '时间窗类型',
      dataIndex: 'w_type',
      key: 'w_type',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '停止时间',
      dataIndex: 's_time',
      key: 's_time',
      align: 'center',
      ellipsis: true,
      render: (record) => record
    },
    {
      title: '迭代次数',
      dataIndex: 'i_time',
      key: 'i_time',
      align: 'center',
      ellipsis: true,
      render: (record) => record
    },
    {
      title: '运行时间',
      dataIndex: 'r_time',
      key: 'r_time',
      align: 'center',
      ellipsis: true,
      width: 200,
      render: (record) => record
    },
  ]

  const [data, setData] = useState([])

  const processedData = (data) => {
    if (data) {
      // console.log(data)
      return data.map((row, rowIndex) => {
        let rowData = {
          key: rowIndex + 1,
          id: rowIndex + 1,
          algor_name: row[11],
          file_name: row[2],
          c_num: row[3],
          c_type: row[4],
          w_type: row[5],
          s_time: row[6],
          i_time: row[7],
          r_time: row[8],
          algor_id: row[1],
          status: row[9],
          process_id: row[0]
        }
        return rowData
      })
    }
  }

  useEffect(() => {
    const getProcessList = async () => {
      const res = await getProcess()
      setData(processedData(res).filter(item => item.status === 1))
    }
    getProcessList()

  }, [])

  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const rowSelection = {
    selectedRowKeys,
    onChange: (newSelectedRowKeys) => {
      if (newSelectedRowKeys.length <= 2) {
        setSelectedRowKeys(newSelectedRowKeys)
      } else {
        message.warning('最多选择两条记录')
      }
    },
  }

  const handleOk = () => {
    const selectedRows = data.filter(row =>
      selectedRowKeys.includes(row.key)
    )
    if (selectedRows.length !== 2) {
      message.warning('请选择两条记录')
      return
    }

    if (selectedRows[0].algor_name[0] === selectedRows[1].algor_name[0]) {
      message.warning('不能选择相同算法')
      return
    }
    if (selectedRows[0].file_name !== selectedRows[1].file_name) {
      message.warning('请选择相同数据集')
      return
    }
    if (selectedRows[0].s_time !== selectedRows[1].s_time) {
      message.warning('请选择相同的停止时间的两条记录')
      return
    }
    if (selectedRows[0].i_time !== selectedRows[1].i_time) {
      message.warning('请选择相同的迭代次数的两条记录')
      return
    }
    // console.log(selectedRows) // 处理选中行的信息
    handleCancel(selectedRows)
  }

  return (
    <div>
      <Modal
        title="选择算法"
        open={isModalOpen}
        width={1000}
        onOk={handleOk}
        onCancel={() => handleCancel(null)}
        okText="确定"
        cancelText="取消"
      >
        <Table
          columns={columns}
          dataSource={data}
          bordered
          rowSelection={rowSelection}
          scroll={{
            y: 'calc(100vh - 420px)',
            x: '110vw',
          }}
        />

      </Modal>
    </div>
  )
}
export default CompareModal